<template>
  <div id="item">
    <li class="todo-item" @click="switchComplete" :class="{completed: todo.isComplete }">
      <span >{{ todo.isComplete }}</span>
      <!--值在标签中内容用需要渲染，指令中用直接在值中调用。-->
      <span style="display: none;">{{ todo.id }}</span>
      <span >{{ todo.content }}</span>
      <button class="destroy" @click="deleteTodo">×</button>
    </li>
  </div>
</template>

<script>
  export default {
    name: "Item",
    props: {
      // 不能todo: 'todo'  报错rightside is not object
      todo: {
        type: Object,
        required: true,
      },
    },
    methods: {
      switchComplete(){
        this.todo.isComplete = !this.todo.isComplete
        this.classIsComplete = !this.classIsComplete
      },
      deleteTodo(){
        // 子不能直接给父传值，需要父组件监听一个自定义事件，子去触发这个事件。然后父组件的这个自定义事件里写逻辑。
        this.$emit('del', this.todo.id)
      }

    }
  }
</script>

<style type="css" scoped>
#item .completed {
  /*注意值不要加引号导致解析错误不显示*/
  text-decoration: line-through;
  color: rgba(40,40,40, 1);
}

</style>